<template>
    <div class="hospitalList">
        <div class="filter-bar">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-input
                            placeholder="医院名称"
                            v-model="hospitalName"
                            class="input-with-select"
                    ></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="handleKeywordFilter"
                    >搜索</el-button
                    >
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="set">新增医院</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table">
            <el-table :data="tableData" height="438" v-loading="loading" stripe>
                <el-table-column label="编号" type="index" :index="indexMethod">
                </el-table-column>
                <el-table-column label="医院名称" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.hi_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="医院编号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.hi_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="set(scope.row)">菜单配置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
                    @current-change="getDepartmentListByPage"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
            >>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {hospitalSelect} from "../../api/hospital";

    export default {
        name: "list",
        data() {
            return {
                loading: false,
                hospitalName: "",
                tableData: [{}],
                pageIndex: 1, //默认显示第一页
                pageSize: 6, //每页显示
                total: 0,
                dialogVisible: false,
                deleteId: "",
                departmentList: [],
            };
        },

        created() {
            this.init();
        },

        mounted() {},

        methods: {
            init() {
                this.getList();
            },
            async getList() {
                try {
                    let res = await hospitalSelect({
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                        hi_name:this.hospitalName
                    });
                    console.log(res, "医生信息");
                    this.tableData = res.list;
                    this.total = res.total;
                } catch (e) {
                    console.error(e);
                }
            },
            handleKeywordFilter() {
                this.getList();
            },
            indexMethod(index) {
                return index + (this.pageIndex - 1) * this.pageSize + 1;
            },
            getDepartmentListByPage() {
                this.getList();
            },
            set(row) {
                if (row) {
                    this.$router.push({
                        path: "/hospitalManage/update",
                        query: {
                            id: row.hi_id,
                        },
                    });
                } else {
                    this.$router.push("/hospitalManage/add");
                }
            },
            deleteDepart(id) {
                this.dialogVisible = true;
                this.deleteId = id;
            },
            async deleteTrue() {
                this.dialogVisible = false;
                let res = await doctorDelete({
                    doc_id: this.deleteId,
                    doc_hospital:sessionStorage.getItem('hospitalId')
                });
                if (res) {
                    this.$message.success(res.msg);
                    this.pageIndex = 1;
                    this.getList();
                }
            },
        },
    };
</script>

<style scoped lang='scss'>
    .hospitalList {
        height: 100%;
        position: relative;
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 20px 0 20px;
        .filter-bar {
            width: 100%;
            margin-bottom: 10px;
            .el-row {
                .el-col {
                    > div {
                        width: 100%;
                    }
                }
                .el-col-5 {
                    max-width: 180px;
                }
                .el-col-9 {
                    max-width: 440px;
                }
            }
        }
        .table {
            margin-top: 20px;
            height: auto;
            .el-table {
                width: 100%;
                height: 100%;
                margin-top: 10px;
                font-size: 14px;
                /*min-height: calc(100% - 88px);*/
            }
        }
        .page {
            margin-top: 20px;
            .el-pagination {
                text-align: center;
            }
        }
    }
</style>